<template>
  <!-- 客服查询 -->
  <Card style="height:800px">
    <header>
      <span>姓名:</span>
      <Input v-model="queryCondition.customerName" placeholder="请输入" style="width: 200px"></Input>
      <span style="width: 200px;margin-left: 10px;">证件号码:</span>
      <Input v-model="queryCondition.idCardNo" placeholder="请输入" style="width: 200px"></Input>
      <span style="width: 200px;margin-left: 10px;">手机号码:</span>
      <Input v-model="queryCondition.phoneNo" placeholder="请输入" style="width: 200px"></Input>
      <span style="width: 200px;margin-left: 10px;">申请时间:</span>
      <Date-picker type="date" v-model="queryCondition.applyTimeStart"></Date-picker>
      ~
      <Date-picker type="date" v-model="queryCondition.applyTimeEnd"></Date-picker>
      <Button type="primary" @click="initPage" style="margin-left: 10px;">查询</Button>
      <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="tableColumns" :data="tableDatas"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="queryCondition.totalPage" :current="queryCondition.currentPage" :page-size="queryCondition.pageSize" show-elevator show-total @on-change="handlePageChange"></Page>
    </div>
  </Card>
</template>

<script>
export default {

  data () {
    return {
      tableColumns: [
        {
          type: 'index',
          title: '序号'
        },
        {
          title: '客户姓名',
          key: 'custName',
          render: (h, params) => {
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  var vm = this
                  vm.$router.push({
                    name: 'customer-service-detail-compont',
                    query: {
                      id: params.row.loanId,
                      custIdCard: params.row.custIdCard
                    }
                  })
                }
              }
            }, params.row.custName)
          }
        },
        {
          title: '贷款单号',
          key: 'loanId'
        }, {
          title: '证件号码',
          key: 'custIdCard'
        },
        {
          title: '手机号码',
          key: 'mobileNum'
        },
        {
          title: '产品',
          key: 'productName'
        },
        {
          title: '申请时间',
          key: 'applyTime',
          render: function (h, params) {
            return h('div',
              new Date(params.row.applyTime).getFullYear() + `-` + (new Date(params.row.applyTime).getMonth() + 1) + `-` + new Date(params.row.applyTime).getDate()
            )
          }
        },
        {
          title: '是否放款',
          key: 'customerStatus',
          render: function (h, params) {
            return h('div',
              (params.row.status === 'D01' || params.row.status === 'A01' || params.row.status === 'A00') ? '已放款' : '未放款'
            )
          }
        }
      ],
      tableDatas: [],
      queryCondition: {
        customerName: '',
        idCardNo: '',
        phoneNo: '',
        applyTimeStart: '',
        applyTimeEnd: '',
        totalPage: 0,
        currentPage: 1,
        pageSize: 20
      }

    }
  },
  methods: {
    handlePageChange (goPage) {
      this.initPage(goPage)
    },
    initPage (goPage) {
      var vm = this
      if (parseFloat(goPage).toString() === 'NaN') {
        goPage = 1
      }
      vm.queryCondition.pageNo = goPage
      if (vm.queryCondition.customerName === '' && vm.queryCondition.idCardNo === '' && vm.queryCondition.phoneNo === '' && vm.queryCondition.applyTimeStart === '' && vm.queryCondition.applyTimeEnd === '') {
        this.$Message.error('必须带上条件才能查询')
        return
      }
      this.$ajax.post(this.$appContext.marvels_core_loanapply + 'loanApply/customerservice/query/service/findPageList', vm.queryCondition).then(re => {
        vm.queryCondition.totalPage = re.data.data.totalCount
        vm.queryCondition.pageSize = re.data.data.limit
        vm.queryCondition.currentPage = re.data.page
        vm.tableDatas = re.data.data.items || []
      }).catch(er => {
      })
      // this.tableDatas=[{'actName':'张三','idCardNo':'612345198009096789','phoneNo':'12345678901','customerStatus':'带身份认证'}];
    },
    reset () {
      this.queryCondition.customerName = ''
      this.queryCondition.idCardNo = ''
      this.queryCondition.phoneNo = ''
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    // this.initPage(1)
  }
}
</script>
